<template>
  <el-form :model="value" :label-position="position" :label-width="labelWidth" :rules="config.rules" :inline="true"
    :size="size" ref="searchForm" style="font-weight: 700;">
    <el-form-item :label="item.label" :prop="item.prop" v-for="(item, index) in config.itemConfig" :key="index"
      :label-width="item.labelWidth ? item.labelWidth : labelWidth" >
      <el-input v-if="item.type == 'input'" v-model.trim="value[item.prop]" :disabled="item.disabled" :clearable="item.clearable ? false : true"
        :placeholder="item.placeholder" :size="size"  style="width:200px;">
      </el-input>
      <el-select :clearable="item.clearable ? false : true" :multiple="item.multiple ? true : false"
        :allow-create="item.allowCreate ? true : false" :filterable="item.filterable ? true : false"
        v-else-if="item.type == 'select'" v-model="value[item.prop]" :disabled="item.disabled"
        :placeholder="item.placeholder" :return-object="item.object" style="width:200px;">
        <el-option v-for="(optItem, inde) in item.optList" :key="inde" :label="optItem.label" :value="optItem.value">
        </el-option>
      </el-select>
      <el-date-picker :value-format="item.dateFormate" v-else-if="item.type == 'date'" v-model="value[item.prop]"
        :type="item.type" :disabled="item.disabled" :clearable="item.clearable ? false : true" :placeholder="item.placeholder"
        :start-placeholder="item.startPlaceholder || '开始日期'" :end-placeholder="item.endPlaceholder || '结束日期'"
        :picker-options="item.pickerOptions"></el-date-picker>
      <el-date-picker :value-format="item.dateFormate" v-else-if="item.type == 'datetimerange'" v-model="value[item.prop]"
        :type="item.type" :disabled="item.disabled" :clearable="item.clearable ? false : true" :placeholder="item.placeholder"
        :start-placeholder="item.startPlaceholder || '开始日期'" :end-placeholder="item.endPlaceholder || '结束日期'"
        :picker-options="item.pickerOptions"></el-date-picker>
      <div v-else></div>
    </el-form-item>
    <el-form-item>
      <div class="searchBtn">
        <el-button v-for="(item, index) in config.operate" :key="index" :size="size" :type="item.type" :icon="item.icon" :disabled="item.disabled"
          @click="hendelClik(item.handleClick, item.rule)">{{ item.name }}</el-button>
      </div>
    </el-form-item>
  </el-form>
</template>

<script setup>
const props = defineProps({
  value: {
    type: Object,
    require: true,
    default: {}
  },
  config: {
    type: Object,
    require: true,
    default: {}
  },
  size: {
    type: String,
    default: "default",
  },
  labelWidth: {
    type: String,
    default: "70px",
  },
  position: {
    type: String,
    default: "right",
  },
})
const { proxy } = getCurrentInstance();
const hendelClik = (func, bool) => {
  if (bool) {
    proxy.$refs.searchForm.validate((valid) => {
      if (valid) {
        func();
      } else {
        return false;
      }
    });
  } else {
    proxy.$refs.searchForm.clearValidate();
    func();
  }
}
</script>
<style scoped>
.searchBtn {
  display: flex;
  justify-content: flex-start;
  align-items: center;
}
</style>
